<template>
  <div class="navbar_index">
    <div class="container">
      <div class="row">
        <div class="col-xl-2 col-lg-3 col-md-3">
          <router-link to="/"><img
              src="https://www.xinde.org/img/logo.gif"
              @click="toast()"
              class="img-fluid my-2"
              alt="xinde"
            ></router-link>
          <button
            type="button"
            @click="menu()"
            class="btn btn-primary float-right mt-4 d-block d-md-none"
          >
            <div style="height:2px;background:#FFF;width:15px;margin-bottom:4px;"></div>
            <div style="height:2px;background:#FFF;width:15px;margin-bottom:4px;"></div>
            <div style="height:2px;background:#FFF;width:15px;"></div>
          </button>
        </div>
        <div
          class="col-xl-10 col-lg-9 col-md-9 d-none d-md-block"
          :class="menushow ==0?'d-block':''"
        >
          <router-link
            class="btn btn-link"
            to="/fics"
            target="_blank"
          >信德文化学会</router-link>
          <!-- <a
            class="btn btn-link"
            href="http://mall.xinde.org"
            target="_blank"
          >信德书城</a> -->
          <a
            class="btn btn-link"
            href="http://v.xinde.org"
            target="_blank"
          >信德视频</a>
          <!-- <a
            class="btn btn-link"
            href="http://mall.xinde.org/book"
            target="_blank"
          >信德电子书</a> -->
          <!-- <a
            class="btn btn-link"
            href="http://mall.xinde.org/epaper"
            target="_blank"
          >信德电子报</a> -->
          <a
            class="btn btn-link"
            href="http://mall.xinde.org/info"
            target="_blank"
          >信息发布</a>
          <router-link
            class="btn btn-link"
            to="/advert/3"
            target="_blank"
          >定汉基金</router-link>
          <a
            class="btn btn-link"
            href="http://new.xinde.org/"
            target="_blank"
          >公教万年历(晨祷、晚祷、诵读日课)</a>
          <router-link
            to="/prayer"
            class="btn btn-link"
            target="_blank"
          >祈祷室</router-link>
          <a
            class="btn btn-link"
            href="https://api.xinde.org/api/download"
            target="_blank"
          >信德社app下载</a>
        </div>
      </div>
    </div>

    <div
      class="container d-none d-md-block"
      :class="menushow ==0?'d-block':''"
    >
      <div class="bg-primary mb-2">
        <router-link
          to="/"
          target="_blank"
          class="btn btn-primary"
        >首页</router-link>
        <router-link
          :to="'/list/' + item.id +'/' + item.pid"
          v-for="(item, index) in catList"
          :key="index"
          :class="item.id == pid || item.id ==catId ?'active':''"
          class="btn btn-primary"
          target="_blank"
        >{{item.title}}</router-link>
        <router-link
          to="/special"
          class="btn btn-primary"
          target="_blank"
        >专题</router-link>
        <router-link
          class="btn btn-primary"
          to="/advert/1"
          target="_blank"
        >汇款方式</router-link>
        <router-link
          to="/link"
          target="_blank"
          class="btn btn-primary"
        >友情链接</router-link>
        <a
          class="btn btn-primary"
          href="http://www.jinde.org/"
          target="_blank"
        >进德公益</a>
      </div>

    </div>
  </div>
</template>
<script>
import { sessionStore } from "store/dist/store.legacy";
import { mapState, mapActions } from "vuex";
export default {
  data () {
    return {
      menushow: 1
    };
  },
  created () {
    this.setCatList();
  },
  computed: {
    ...mapState({
      catList: state => state.cat.catList
    }),
    catId () {
      return this.$route.params.id;
    },
    pid () {
      return this.$route.params.pid;
    },

  },
  watch: {
    $route: {
      handler: function () {
        if (this.menushow == 0) {
          this.menushow = 1;
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    ...mapActions("cat", ["setCatList"]),
    toast () {
      sessionStore.clearAll();
    },
    menu () {
      this.menushow = !this.menushow;
    }
  }
};
</script>

<style scoped>
.btn {
  border-radius: 0;
}
</style>


